<script type="text/x-template" id="tool-main">
    <div class="switcher-btn">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="key:val->Json" name="keyValConvertJson">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">多行key:val->Json格式</p>
                    <cc-keyval-convert-json-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Json->key:val" name="jsonConvertKeyVal">
                <div class="switcher-btn-wrapper">
                    <p class="switcher-title">Json->key:val</p>
                    <cc-json-convert-keyval-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="url参数->Json" name="url2Json">
                <div class="switcher-btn-wrapper">
                    <cc-url-param-convert-json-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="key:val->url参数" name="keyVal2Url">
                <div class="switcher-btn-wrapper">
                    <cc-keyval-convert-url-param-el/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Json->url参数" name="json2Url">
                <div class="switcher-btn-wrapper">
                    <cc-json-convert-url-param-el/>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</script>

<script>
    Vue.component('tool-main', {
        template: '#tool-main',
        data() {
            return {
                activeTab: 'keyValConvertJson',
            }
        },
        methods: {

        },
        watch: {
        },
        created() {

        }
    })

</script>
<style>
    .switcher-btn .el-form--inline > .cc-var {
        display: inline-block;
        margin-right: 40px;
    }

    .switcher-btn-wrapper {
        border: 1px dashed #ccc;
        margin: 20px 20px 40px 20px;
        padding: 0 20px;
    }

    .switcher-btn-wrapper .switcher-title {
        background: #fff;
        position: relative;
        top: -10px;
        display: inline-block;
        padding: 0 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .switcher-btn-wrapper .switcher-title span {
        margin: 0 10px;
        font-size: 14px;
        font-weight: normal;
    }
</style>